<template>
  <!-- @mouseover.native组织事件冒泡的鼠标移入事件；@mouseleave.native组织事件冒泡的鼠标移出事件； -->
  <div class="w-full h-[90%]" ref="tableBodyHeight">
    <div class="flex justify-between items-center w-full px-20px my-15px">
      <el-button type="danger" v-if="isScroll" @click="changeScroll">关闭自动播放</el-button>
      <el-button type="primary" v-else @click="changeScroll">开启自动播放</el-button>
      <el-radio-group class="mr-5" v-model="scrollSpeed" @change="createScroll(scrollSpeed)">
        <el-radio-button :label="35"><span>慢速</span></el-radio-button>
        <el-radio-button :label="15"><span>中速</span></el-radio-button>
        <el-radio-button :label="5"><span>快速</span></el-radio-button>
      </el-radio-group>
    </div>
    <el-table ref="scrollTable" :data="tableData" :height="tableHeight" v-load="tableloading"
      :header-cell-style="{ color: '#000000', borderColor: '#5CAFE1', backgroundColor: '#d0edfe', fontSize: '16px', fontFamily: 'PingFang-sc-Bold' }"
      @mouseover.native="clearScroll" @mouseleave.native="createScroll(scrollSpeed)">
      <el-table-column type="index" width="70" align="center" label="序号" />
      <el-table-column v-for="item in tableColumnList" :key="item.prop" :prop="item.prop" :label="item.label"
        align="center">
        <template #default="scope">
          <div v-if="item.label == '监测时间'">
            {{ dayjs(scope.row[item.prop]).format('MM-DD HH:mm') }}
          </div>
          <div v-else> {{ scope.row[item.prop] !== null ? scope.row[item.prop] : '-' }} </div>
          <el-table-column v-for="it in item.children" :key="it.prop" :prop="it.prop" :label="it.label" align="center">
            <template #default="childrenScope">
              <div v-if="it.label.includes('时间')">
                {{ childrenScope.row[it.prop] ? dayjs(childrenScope.row[it.prop]).format('MM-DD HH:mm') : '-' }}
              </div>
              <div v-else-if="it.label == '最新水位'">
                {{ childrenScope.row[it.prop] !== null ? (it.valueFixed ?
                  (Number(childrenScope.row[it.prop]).toFixed(it.valueFixed)) : childrenScope.row[it.prop]) : '-' }}

                <span style="color:red;" v-show="childrenScope.row.wptnr > 0">↑</span>
                <span style="color:green;" v-show="childrenScope.row.wptnr < 0">↓</span>
              </div>
              <div v-else>
                {{ childrenScope.row[it.prop] !== null ? (it.valueFixed ?
                  (Number(childrenScope.row[it.prop]).toFixed(it.valueFixed)) : childrenScope.row[it.prop]) : '-' }}
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue'
import tableColumn from './tableColumn.js'
import { dayjs, ElMessage } from 'element-plus'
import { gettableList } from '@/api/table/index.ts'


let tableHeight = ref()
let tableloading = ref(false)
let tableColumnList = ref(tableColumn.realRainfallSituationTable)

let scrollTable = ref()
let scrollSpeed = ref(35) // 滚动距离模拟滚动速度
let tableTimer = ref(null) // 滚动定时器
let isScroll = ref(true)
// 清除滚动定时器
const clearScroll = () => {
  clearInterval(tableTimer.value)
  tableTimer.value = null
}

// 滚动
const createScroll = (speed) => {
  clearScroll()
  const table = scrollTable.value.layout.table.refs // 拿到 table
  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild // 拿到可以滚动的元素
  let scrollTop = tableWrapper.scrollTop  // 记录距离顶部距离，方便触底回顶

  // 若有滚动距离则滚动
  if (isScroll.value) {
    // 定时器往下增加距离顶部距离
    tableTimer.value = setInterval(() => {
      scrollTable.value.setScrollTop(scrollTop++)
      // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）tableWrapper.scrollHeight，返回滚动对象的顶部
      if (Math.round(tableWrapper.clientHeight + tableWrapper.scrollTop) >= tableWrapper.scrollHeight) {
        scrollTop = 0
        scrollTable.value.setScrollTop(scrollTop)
      }
    }, speed)
  }
}

// 是否滚动
const changeScroll = () => {
  isScroll.value = !isScroll.value
  if (isScroll.value == true) {
    createScroll(scrollSpeed.value) // 开始滚动
  } else {
    clearScroll() // 停止滚动
  }
}

let tableBodyHeight = ref()
onMounted(async () => {
  tableHeight.value = await tableBodyHeight.value.scrollHeight  // 文档的高度(不包括滚动条)
  getList()
  console.log(tableHeight.value, 'scrollTable')
})

let tableData = ref([])
const getList = async () => {
  console.log('数据');
  try {
    const res = await gettableList()
    if (res.code == 200) {
      tableData.value = res.data
      console.log(res, 'mock3');

      ElMessage({
        type: "success",
        message: res.message,
      })
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: '获取失败',
    })
  }

}
</script>


<style lang="scss" scoped></style>